<template>
  <van-list class="deepCintainer" v-model:loading="loading" :finished="finished" :finished-text="noMoreStr"
    @load="onLoad">
    <template v-for="(item) in list" :key="item.id">
      <div :class="['li', {'today': is_today(item.date) }]">
        <div class="flexCrossCenter time" v-if="item.date">
          <van-icon name="clock" />
          <p>{{ transTime(item.date) }}</p>
        </div>
        <div class="panel" @click="redirect(item.id)">
          <h1 class="ell">{{ item.title }}</h1>
          <div class="detail">
            <van-image class="thumbnail" :src="`${globe.staticDomain}/${item.image}`" fit="cover" />
            <van-text-ellipsis class="desc" rows="4" :content="item.desc" />
          </div>
        </div>
      </div>
    </template>
    <van-empty description="暂无数据" v-if="!loading&&list.length == 0" />
  </van-list>
</template>

<script setup>
import { format, isToday } from 'date-fns';
import { articleList } from '@/api/calc';
import { useUserStore, useGlobeStore } from '@/stores'
import { useRouter } from 'vue-router'

const router = useRouter()
const user = useUserStore()
const globe = useGlobeStore();
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const noMoreStr = ref('');
let pageIndex = 1;

function redirect(id) {
  const path = `/detail/deep/${id}`;
  router.push(path);
  user.log({ type: 'event', action: 'click', opt_label: "deep文章详情", target_url: path, data_id: id});
}
function transTime(stime) {
  return format(stime * 1000, "MM/dd")
}
function is_today(timestamp){
  const date = new Date(timestamp * 1000);
  return isToday(date);
}
const onLoad = () => {
  // 异步更新数据
  articleList({ type: 'deep_read', page: pageIndex }, pageIndex==1).then(res=>{
    const { current_page, data, last_page } = res;
    list.value = list.value.concat(data);
    // 数据全部加载完成
    if (current_page >= last_page) {
      finished.value = true;
      if (list.value.length > 0) noMoreStr.value = "没有更多了"
    } else {
      pageIndex++;
    }
    loading.value = false;
  }).catch(()=>{
    // 加载状态结束
    loading.value = false;
    finished.value = true;
  })
};
</script>

<style lang="less" scoped>
.deepCintainer{
  width: 100%;
  padding: 16px 16px 0;
  .time{
    font-size: 18px;
    color: #86909C;
    p{
      margin-left: 6px;
      line-height: 1;
    }
  }
  .panel{
    width: 343px;
    height: 147px;
    border-radius: 6px;
    border: 1px solid #ffffff;
    background-color: #fff;
    margin-top: 12px;
    margin-bottom: 16px;
    padding: 12px;
    h1{
      color: #1D2129;
      font-size: 16px;
      line-height: 1;
      margin-bottom: 12px;
    }
    .detail{
      display: flex;
      .thumbnail{
        width: 154px;
        height: 87px;
        margin-right: 8px;
        border-radius: 8px;
        overflow: hidden;
      }
      .desc{
        flex: 1;
        font-size: 12px;
        color: rgba(0,0,0,0.6);
        line-height: 22px;
      }
    }
  }
  .today{
    .time{
      color: #F96235;
    }
    .panel{
      background: linear-gradient(180deg, #ffefef 0%, #ffffff 30.21%);
    }
  }
}
</style>
